import { Button, Form, Input, Select, Col, Row,} from 'antd'
import React from 'react'
import { Divider } from 'antd'
import useGetCategories from '../../helpers/getCatgories';
import ProductItem from './ProductItem'
import { useDispatch, useSelector } from 'react-redux';
import { search_products } from '../../store/actions/search';

function Search() {
  const {results} = useSelector(state => state.search)
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  const handleFinish = value => {
    dispatch(search_products(value))
    form.resetFields()
  }
  const categories = useGetCategories()
  return (
    <>
      <Form form={form} onFinish={handleFinish} initialValues={{category: 'all'}} layout='inline'>
      <Input.Group compact>
        <Form.Item name='category'>
          <Select>
            <Select.Option value='all'>所有分类</Select.Option>
            {categories.map(category => (<Select.Option key={category._id} value={category._id}>{category.name}</Select.Option>))}
          </Select>
        </Form.Item>
        <Form.Item name='search'>
          <Input placeholder='请输入商品名称'></Input>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">搜索</Button>
        </Form.Item>
      </Input.Group>
      </Form>
      <Divider />
      <Row gutter={[16,16]}>
        {results.map(product => (<Col span={6} key={product._id}><ProductItem product={product} /></Col>))}
      </Row>
     
    </>
    
  )
}

export default Search
